<?
    include('../home/config.php');
    $limit    = getValue('limit','str','POST');
    $type_id  = getValue('type_id','int','POST');
    $arr_product = getProduct($type_id,$limit);
    $count = count($arr_product);
    if($count > 0){
    $i=0;
    foreach($arr_product as $key=>$value){
        $i++;
        $link = rewriteDetailProduct($value['product_name'],$value['product_id']);
?>
        <div class="item_FeaturedProducts" <?if($i%4==0) echo 'style="margin-right:0px;"'?>>
            <a href="<?=$link?>" rel="<?=$path_img_product.'medium_'.$value['product_pic']?>">
                <img class="small_img_products" data-content="<?=$value['product_des']?>" data-src="<?=$path_img_product.'medium_'.$value['product_pic']?>" src="<?=$path_img_product.'small_'.$value['product_pic']?>" onerror="this.src='<?=$error_pic?>'" />
            </a>
            <div class="info-Products">
                <span class="tease-Products" ><?=$value['product_name']?></span><br />
                <span class="price-Products"><?=number_format($value['product_price'],0,'','.')?> ₫</span>
            </div>
        </div>
    <?}unset($arr_product)?>
<?}?>
<script>
$(document).ready(function(){
    var yOffset = 30;
    var	xOffset = 20;
     $(".small_img_products").hover(function(e){
        $("body").append("<span id = 'preview' ><img  src='"+ $(this).attr('data-src') + "'/><p class = 'caption'>" + $(this).attr('data-content') + "</p></span>");
        $("#preview")
    		.css("top",(e.pageY + xOffset) + "px")
    		.css("left",(e.pageX + yOffset) + "px")
    		.fadeIn("fast");
    },function(){
        	$("#preview").remove();
    });
    $(".small_img_products").mousemove(function(e){
    	$("#preview")
    		.css("top",(e.pageY + xOffset) + "px")
    		.css("left",(e.pageX + yOffset) + "px");
    });
});

</script>